<template>
	<div class="home">
		<div class="nav">
			<el-menu :default-active="activeIndex2" 
			class="menu"
			 mode="horizontal" 
			 @select="handleSelect"
			 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item index="1">音乐</el-menu-item>
				<el-submenu index="2">
					<template slot="title">我的项目</template>
					<el-menu-item index="2-1">html</el-menu-item>
					<el-menu-item index="2-2">canvas</el-menu-item>
					<el-menu-item index="2-3">java</el-menu-item>
				</el-submenu>
				
				<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">学习</a></el-menu-item>
				<el-submenu index="4">
					<template slot="title">相册</template>
					<el-menu-item index="4-1">初中</el-menu-item>
					<el-menu-item index="4-2">高中</el-menu-item>
					<el-menu-item index="4-3">大学</el-menu-item>
					<el-menu-item index="4-3">生活</el-menu-item>
					<!-- <img src="@/assets/imgs/m1.jpeg" /> -->
				</el-submenu>
				<el-menu-item index="5"><a href="https://www.ele.me" target="_blank">收藏视频</a></el-menu-item>
			</el-menu>
		</div>
		<div class="carousel">
			<el-carousel :interval="4000" type="card" height="300px" class="list">
				<el-carousel-item v-for="(item,index) in img" :key="index" >
					<img class="img" :src="item.src" />
					<p class="imgdes">{{ item.des }}</p>
				</el-carousel-item>
			</el-carousel>
		</div>
		
		<div class="dynamic-list">
			<div class="item" v-for="(item,index) in dynamicList">
				<p class="title" v-html="item.title"></p>
				<p class="detail" v-html="item.detail"></p>
				<div class="imgs">
					<img v-for="(img,index) in item.imgs" :src="img" alt="">
				</div>
				<p class="time">{{item.time}}</p>
			</div>
		</div>
	</div>
</template>
<style scoped lang="less">
	.home{
		/*顶部导航菜单*/
		.nav{
			.menu{
				padding-left:10px;
			}
		}
		/*轮播*/
		.carousel{
			
			.list{
				perspective: 900px;
				// z-index: 0;
				.img{
					width: 100%;
					height: 100%;
				}
				.imgdes{
					position: absolute;
					max-width: 150px;
					overflow: hidden;
					text-overflow: ellipsis;
					left: 50%;
					transform:translateX(-50%);
					z-index: 10;
					bottom: 5px;
				}
			}
			
		}
		/*动态列表*/
		.dynamic-list{
			padding: 0 20px;
			.item{
				border: #909399 1px solid;
				&+.item{
					margin-top:5px;
				}
				.title{
					
					font-size: 1.33em;
					text-align: center;
				}
				.detail{
					text-indent: 2em;
					text-align: left;
				}
				.imgs{
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
					// justify-content:space-around;
					img{
						margin-left: 5px;
						outline: #E9E9EB 1px solid;
						max-height: 150px;
					}
				}
				.time{
					margin-top: 10px;
					color: #909399;
				}
			}
		}
	}
</style>

<script>
	// @ is an alias to /src
	import Header from '@/components/Header.vue'
	import Player from '@/components/Player.vue'

	export default {
		name: 'home',
		components: {
			Header,
			Player
		},

		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				img:[
					{
						src:'/imgs/m1.jpeg',
						des:'第一张'
						
					},
					{
						src:'/imgs/m2.jpg',
						des:'第二张'
					},
					{
						src:'/imgs/m3.jpg',
						des:'第三张'
					},
					{
						src:'/imgs/m1.jpeg',
						des:'第一张'
					},
					{
						src:'/imgs/m2.jpg',
						des:'第二张'
					},
					{
						src:'/imgs/m3.jpg',
						des:'第三张'
					}
				],
				dynamicList:[{
					title:'相牵她的手，就趁着车流湍急人潮涌动，想要吻她就趁着灯光昏暗气氛暧昧',
					detail:'ustify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。提示：使用 align-content 属性对齐交叉轴上的各项（垂直）',
					imgs:['/imgs/m1.jpeg','/imgs/m2.jpg','/imgs/m3.jpg'],
					time:'2019年10月26日'
				},
				{
					title:'相牵她的手，就趁着车流湍急人潮涌动，想要吻她就趁着灯光昏暗气氛暧昧',
					detail:'ustify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。提示：使用 align-content 属性对齐交叉轴上的各项（垂直）',
					imgs:['/imgs/m1.jpeg','/imgs/m2.jpg'],
					time:'2019年10月26日'
				},
				{
					title:'相牵她的手，就趁着车流湍急人潮涌动，想要吻她就趁着灯光昏暗气氛暧昧',
					detail:'ustify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。提示：使用 align-content 属性对齐交叉轴上的各项（垂直）',
					imgs:['/imgs/m1.jpeg'],
					time:'2019年10月26日'
				},
				]
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
